<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.min.js"></script>
    <script src="editor.md/editormd.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>

</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/log.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="reg.html">注册</a>
    </div>
    <!-- 版心 -->
    <div class="login-container">
        <!-- 中间的登陆框 -->
        <div class="login-dialog">
            <h3>登陆</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username" onblur="user()">
            </div>
            <div id="warn1" class="warn"></div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password" onblur="password()">
            </div>
            <div id="warn2" class="warn"></div>
            <div class="row1">
                <span>验证码</span>
                <div>
                 <input type="text" id="password2" placeholder="请输入验证码" onblur="password()">
                </div>&nbsp&nbsp
                <div><img src="/user/generateImage" alt="" srcset="" onclick="changeImage(this)"></div>
            </div>
            <div id="warn3" class="warn"></div>
            <div class="row">
                <button id="submit" onclick=re()>提交</button>
            </div>
            <div id="alert" style="color: red;text-align: center">

            </div>
        </div>
    </div>



    <script>
        var flag1=false
        var flag2=false

       function changeImage(obj){
            var timenow=new Date().getTime();
            obj.src="/user/generateImage?d="+timenow;
       }
        function  cid(id){
            return document.getElementById(id)
        }
        //检查账号是否为空
        function user(){
            if(cid("username").value==null || cid("username").value==""){
                $("warn1").innerText="*用户名不能为空"
                return
            }         
            if(1){
                cid("warn1").innerText=""
                flag1=true
            }
        }
        //检查密码
        function password(){
            if(cid("password").value==null||cid("password").value==""){
                $("warn2").innerText="*密码不能为空！"
                return
            }
            if(1){
                cid("warn2").innerText=""
                flag2=true
            }
        }
        function re(){
            if(cid("password").value==null||cid("password").value==""){
                cid("warn2").innerText="*密码不能为空！"
            }
            if(cid("username").value==null || cid("username").value==""){
                cid("warn1").innerText="*用户名不能为空"
            }
            if(cid("password2").value==null || cid("password2").value==""){
                cid("warn3").innerText="*验证码不能为空"
            }
            var username=jQuery("#username").val().trim();
            var password=jQuery("#password").val().trim();
            var password2=jQuery("#password2").val().trim();
            if(flag1&&flag2) {
                $.post("/user/login", {
                    "uName": username,
                    "password": password,
                    "password2":password2
                }, function (res) {
                    if (res.code == 200) {
                        window.location.href = "/blog_list2.html";
                    } else {
                        $("#alert").html(res.msg);
                        $("warn2").innerText = "";
                    }
                })
            }
        }
    </script>
</body>

</html>